import React from "react";
import InputAtom from "../../Atoms/Input.Atom";
import { InputAtomEnum } from "../../Atoms/Input.Atom/enum";
import ButtonAtom from "../../Atoms/Button.Atom";
import ButtonAtomEnum from "../../Atoms/Button.Atom/enum";
import { PromotionalProps } from "./type";
import { IPromotionalPropsDefault } from "./mock";
import useCartStore from "@/business.InterfaceLayer/hooks/store/localstorage/useCartStore";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import { useTranslation } from "react-i18next";

const Promotional: React.FC<PromotionalProps> = ({ total }) => {
  const { t } = useTranslation();
  const { createOrder } = useCartStore();
  return (
    <div className="flex justify-between items-start rounded-lg border border-borderColor text-textColor bg-bgGen py-[30px] px-[35px]">
      <InputAtom
        type={InputAtomEnum.TEXT}
        className="max-w-72"
        placeholder={t("CartPage.Promotional.placeholder")}
      />
      <div className="flex items-center gap-[50px]">
        <div className="flex items-end gap-[15px]">
          <TextAtom type={TextAtomEnum.enum_h3} className="font-semibold">
            {t("CartPage.Promotional.total")}:
          </TextAtom>
          <TextAtom type={TextAtomEnum.enum_h3} className="font-semibold">
            {total?.toLocaleString()} ₽
          </TextAtom>
        </div>
        <div className="w-[300px]">
          <ButtonAtom
            type={ButtonAtomEnum.enum_butButton}
            onClick={createOrder}
          >
            {t("CartPage.Promotional.button")}
          </ButtonAtom>
        </div>
      </div>
    </div>
  );
};

Promotional.defaultProps = IPromotionalPropsDefault;
export default React.memo(Promotional);
